<script setup lang="js">
import { ref, onMounted } from "vue";
import { addComment, getAllEvaluationId, getUserInfoById } from "@/apis";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { useUserStore } from "@/store";

const discussions = ref([]);
const router = useRouter();
const userStore = useUserStore();

onMounted(async () => {
  const rawData = await getAllEvaluationId();
  const data = rawData.data?.eva_list;
  data.forEach((item) => (item.inputComment = "")); // 为每个项目添加评论输入初始化
  discussions.value = data;
});

// 定义处理评论提交的方法
function handleComment(evaluationID, inputComment) {
  console.log(`Evaluation ID: ${evaluationID}, Comment: ${inputComment}`);
  addComment(userStore.getUID, evaluationID, inputComment)
    .then((res) => {
      ElMessage({
        message: "成功提交评论",
        type: "success",
      });
    })
    .catch((err) => {
      ElMessage({
        message: "评论失败，请检查你的权限或者联系管理员！",
        type: "error",
      });
    });
}

/**
 *
 * @param evaluationID {string}
 */
const handleClickGoToResult = (evaluationID) => {
  if (evaluationID) {
    router.push({path:`/evaluationResult`, query:{id:evaluationID, isShow:0}});
  } else {
    router.push("/evaluationResult");
  }
};
</script>

<template>
  <div>
    <h2 id="title">讨论区</h2>
    <el-card
      v-for="discussion in discussions"
      :key="discussion.uuid"
      class="box-card"
    >
      <template #header>
        <div
          class="card-header"
          @click="handleClickGoToResult(discussion.uuid)"
        >
          测评ID: {{ discussion.uuid }} | 测评名称: {{ discussion?.name }} | 测评人：{{ discussion?.applicants_name }}
        </div>
      </template>

      <!-- 卡片内容，遍历显示用户消息 -->
      <div class="text item">
        <!--        <ul>
          <li v-for="(message, index) in discussion.userMessage" :key="index">
            {{ message }}
          </li>
        </ul>-->
        <div @click="handleClickGoToResult(discussion.uuid)">
          点击这里查看详情
        </div>
      </div>

      <!-- 卡片底部，包含一个绑定到该discussion对象的输入框和一个按钮 -->
      <template #footer>
        <div class="footer-container">
          <el-input
            v-model="discussion.inputComment"
            placeholder="我也说几句..."
            class="input-comment"
          ></el-input>
          <el-button
            type="primary"
            @click="
              handleComment(discussion.evaluationID, discussion.inputComment)
            "
            >提交评论
          </el-button>
        </div>
      </template>
    </el-card>
  </div>
</template>

<style scoped>
#title {
  margin: auto 0;
  text-align: center;
}

.box-card {
  margin-bottom: 20px;
}

.card-header {
  font-size: 18px;
  color: #333;
}

.footer-container {
  display: flex;
  align-items: center; /* 确保输入框和按钮垂直居中 */
}

.input-comment {
  flex-grow: 1; /* 输入框将占据多余空间 */
  margin-right: 10px; /* 在输入框和按钮之间添加一些空间 */
}
</style>
